<template>
  <el-cascader
    @change="changeCity"
    ref="cascaderRef"
    change-on-select
    v-model="props.itemValue.attr_val"
    :options="cityJson"
    :props="cityProps"
    :disabled="props.isDisabled == 'look'"
    clearable
    :placeholder="`请选择${props.itemValue.attr_name}`"
    style="width: 100%"
  />
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps } from "vue";

import cityJson from "@/assets/js/city";

const cascaderRef = ref();

const cityProps = reactive<any>({
  value: "code",
  label: "name",
});

type Props = {
  itemValue: object;
  isDisabled: String;
};

const props = defineProps<Props>();

  const changeCity = (val: any) => {
    // console.log(cascaderRef.value.getCheckedNodes()[0],'----label')
    // console.log('cascaderRef.value.inputValue1: ', cascaderRef.value);
    let area = cascaderRef.value.getCheckedNodes()[0].text.split('/')
    if (area.length > 1) {
      props.itemValue.current_val = {
        province_code: val[0],
        city_code: val[1],
        area_code: val[2] || '',
        province_name: area[0].trim(),
        city_name: area[1].trim(),
        area_name: area[2]?.trim() || ''
      }
    } else {
      props.itemValue.current_val = {
        province_code: '',
        city_code: '',
        area_code: '',
        province_name: '',
        city_name: '',
        area_name: ''
      }
    }
  }
</script>
